<template>
	<div class="container" id="canvasImg">
		<div class="bg-box">
			<image src="/static/red-package.png" class="red-bg"></image>
			<div class="bottom-content">
				<div class="user-info">
					<div class="user-box">
						<u-avatar :src="formData.avatar"></u-avatar>
						<div class="base-info">
							<text class="nickName-txt">{{ formData.nickname }}</text>
							<div class="nickName-txt">uid：{{ formData.id }}</div>
						</div>
					</div>
					<div class="instruction-txt">长按二维码加入</div>
				</div>
				<div class="qrcode-container">
					<canvas canvas-id="qrcode" style="width:90px; height:90px;" class="qrcode"></canvas>
				</div>
			</div>
		</div>
		<button @click="transImage1">123</button>
	</div>
</template>
<script>
import uQRCode from "@/utils/uqrcode.js";
import html2canvas from 'html2canvas';

export default {
	data() {
		return {
			formData: {
				avatar: '',
				nickname: '',
				id: '',
				openid: '',
				unionid: '',
				distributionCode: '',
			},
		}
	},
	mounted() {
		this.getUserInfo();
	},
	methods: {
		qrFun(text) {
			uQRCode.make({
				canvasId: 'qrcode',
				componentInstance: this,
				text: text, //这里的text需要生成的二维码地址
				size: 90, //和上面保持一致即可默认像素
				margin: 5,
				backgroundColor: '#ffffff',
				foregroundColor: '#000000',
				fileType: 'jpg',
				errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				success: res => { }
			})
		},
		//获取用户信息
		getUserInfo() {
			uni.showLoading({
				mask: true,
				title: '用户信息获取中...'
			})
			this.$api.baseInfo.getUserInfo().then(res => {
				console.log(res);
				uni.hideLoading();
				this.formData.avatar = res.data.avatar;
				this.formData.id = res.data.id;
				this.formData.nickname = res.data.nickname;
				this.formData.distributionCode = res.data.distribution_code;
				let url = 'pages/index/index?invite_code=' + this.formData.distributionCode;
				this.qrFun(url);
			})
		},

		transImage1(){
			// uni.showLoading({
			// 	title: '正在转换...'
			// });
			// this.$nextTick(() => {
			// 	console.log(this.$refs)
			// })
			// return
			//点击保存按钮的回调事件
			// const element = document.getElementById('canvasImg'); // 需要导出的页面
			// // console.log(element);
			// const element = this.$refs.canvasImg; // 需要导出的页面
			// console.log(element);
			// html2canvas(element, {
			// 	allowTaint: true,
			// 	useCORS: true
			// }).then((canvas) => {
			// 	// imgUrl 是图片的 base64格式 代码 png 格式
			// 	const imgUrl = canvas.toDataURL('image/png');
			// 	console.log(imgUrl);
			// 	// screenshot.value = imgUrl;
			// 	//下载图片的功能。
			// 	// downloadIamge(imgUrl, 'plantCardImg.png');
			// 	uni.hideLoading();
			// });
			// }


			html2canvas(this.$refs.canvasImg).then(canvas => {
					// uni.showLoading({
					// 	title: '生成中...'
					// })
					// console.log("canvas", canvas.toDataURL());
					let imgsBox = canvas.toDataURL() //base64字符串   放到图片标签上
					// uni.hideLoading()
					console.log(imgsBox);
				});
		}
	}
}
</script>
<style>
.poster-wrap {
	height: 100vh;
	background: #f00;
}
</style>